Learn how to create great-looking, interactive maps with d3.
A comprehensive video course to create geospatial data visualizations with javascript and d3.
Get the first six-part lesson for free on creating a simple map.
Learning d3 can be hard
You not only need to learn d3 but a lot of other concepts before that.
- SVG/Canvas
- HTML
- Javascript
There are a lot of ways of doing things in d3. There is no one approach.
If you search on social networks and google, there are a ton of tweets and blog posts about why d3 is hard for them.
Learning with examples is frustrating
Most people learn d3 by looking at examples and changing parts of it to fit their needs.
You iterate on these examples, look at the documentation, maybe consult a book or look at videos on YouTube.
But people get frustrated using this method.
Undocumented example code makes it harder to learn
A lot of examples don’t have of comments or explanations. Which makes it hard to understand what is being done.
Potentially bad code is hard to fix
Everyone can create examples with d3, and it’s hard to know the experience level of the creator.
Examples may have bad or repetitive code.
If you learn with these possibly bad examples, you could learn the wrong things.
Old examples lead to more frustration
Thanks to the introduction of observable more examples are created with the current version of d3. But on bl.ocks a majority of examples are still created with v3 which was replaced in 2016 with v4.
Most d3.js tutorials only scratch the surface
Inspired by the amazing @milafrerichs #D3 workshop at #foss4gna, I was able to create an interactive globe map of my twitter friends.

Chris Marx
How this course is different
Geospatial Data Visualization with d3 will help you take a more focussed approach for learning d3.
Retain more by learning with projects
Project-based learning is believed to result in more in-depth knowledge through active exploration of real-world challenges and problems.
Self-check your learning
Check what you learn after each section with exercises.
Stay on top of your learning path
Weekly accountability emails will help you stay on top of your learning experience and keep you motivated.
Modeled from successful hands-on workshops
This course is modeled from hands-on workshops at geospatial conferences I gave over the last three years.
I iterated on the format, the course content, and examples over the years to land on this course format and content.
Conferences I gave this workshop at:
- FOSS4G UK 2019
- FOSS4G Noth America 2019
- FOSS4G Oceania 2018
- FOSS4G 2017
Plans
- Access to online-course
- 4 course projects
- > 17 lessons
- > 68 excercises
- Access to online-course
- 4 course projects
- > 17 lessons
- > 68 excercises
- Weekly accountability emails
- By-weekly group coaching call
- Access to accountability forum and group
- Access to online-course
- 4 course projects
- > 17 lessons
- > 68 excercises
- Weekly accountability emails
- By-weekly group coaching call
- Access to accountability forum and group
- Lifetime access to updates
- 1x 30 60 minute call with me
- Library of starter projects
- Templates (private github repo)
- Tip ebook
If you're having trouble with the integrated buying option click here
Course content
Lesson 1: Simplest Map Possible Learnings
In this lesson, you'll create your first simple map. You'll learn all the important aspects of creating maps with d3.
Lesson 2: Housing Burden Project - Basic Choropleth Map
Create our first map from a GeoJSON and how to style it.
Lesson 3: Housing Burden Project - Interactivity
How to make your map interactive with tooltips and zoom
Lesson 4: Housing Burden Project - Bubble Map
Learn the concepts of creating a bubble map
Lesson 5: Housing Burden Project - Annotations
How to enhance your map with annotations
Lesson 6: Bousing Burden Project - small multiples
What are small multiplies and how to use them.
Lesson 7: Housing Burden Project - reusable code
How to create code that is reusable among projects and make updating your chart easier
Lesson 8: Housing Burden Project - responsiveness
Create responsive maps with d3
Lesson 9: housing burden project - Animations
How to animate your maps with transitions.
Lesson 10: housing burden - dashboard
Bringing all together and create our first dashboard.
Advanced Course Content
The more advanced part of the course is still t.b.d. and you can influence the direction of the course.
Lesson: Live Election Map Project
How to update your chart with live data.
Lesson: Hexbin Map
When to use Hexbins How to create Hexbins
Lesson: Multivariate Choropleth Map
What are Multivariate Choropleth Maps
How to use and create them
Lesson: Project NO2 levels in the atmosphere
How to get satellite data, how to display raster data on a d3 map
Lesson: Zoning Project
How to use canvas to visualize all buildings in San Diego and their property zone.
Lesson: Basemaps with d3
How to use vector tiles with d3
How to use raster tiles with d3
Bonus: Data Aggregations with d3 Learnings: Rollup, map
Projects
Project 1: Housing Burden Chicago
We look at the amount people of Chicago need to invest in housing. There is an interesting dataset from the city of Chicago.
We first create a basic Choropleth map to visualize the housing burden per neighborhood. The info window will include a bubble map as well with additional data.
We then move forward and create a dashboard with interactivity, tables, and small multiples.
Project 2: Live Election Map
We look at a mock election for a city election. I will provide a server with real-time data of results and we use Choropleth maps and Cartograms to visualize the election results.
Project 3: NO2 levels in a City
Using satellite raster data we look at NO2 levels in different cities around the world.
Project 4: Single Family zoning in San Diego
We look at zoning data for the city of San Diego and look at different ways to map
What kind of maps will you be able to create after you‘ve gone through the course?
Attributions:
Hexbin map at top: Mike Bostock
Choropleth Map: New York Time
Bubble Map: Washington Post